<template>
    <view-box style="background:#F3F6F7;">
      <div style="height:10px;"></div>
      <div class="co-laou" v-for="(item, index) in items" :key="index" v-if="identity === '1'" @click="$router.push('/Companydetails?id=' + item.company_info.uid)">
        <div class="co-bott-om" style="border-bottom: 1px solid #E6E6E6;">
           <div class="work-job-lj">
                <p style="color: #ff0000;font-weight: 600;width:100%;">
                  <img style="width:66px;height:66px;border-radius: 7px;margin-right:10px;" :src="$apiUrl + '/storage/' + item.company_info.logo" alt="">
                </p>
            </div>
            <div class="work-job-cl" >
                <p class="job-pol-col" style="font-size:13px;color:#000;">{{item.company_info.cname}}</p>
                <p class="job-pol-col" style="font-size:13px;color:#BABABA;">{{item.company_info.renshu}} | {{item.company_info.hangye}}</p>
            </div>
            <div class="work-job-pl">
                <p style="font-size:13px;color:#bababa;">{{item.created_at}}</p>
            </div>
        </div>
        <div class="co-pljh">
          <p style="color:#32B6C6;">web工程师等2个职位正在招聘</p>
        </div>
     </div>
      <div class="co-laou" v-for="(item, index) in items" :key="index" v-if="identity === '2' && item.basics !== null"  @click="$router.push('/previewLouw?id=' + item.by_id)">
        <div class="co-lib">
            <div class="co-dilkp">
                <p style="font-size:15px;color:#000;font-weight: 600;">{{item.basics.company}}</p>
                <p style="font-size:13px;color:#BABABA;">{{item.basics.city}} | {{birth - item.basics.start_work_time}}年 | 学历不限</p>
            </div>
            <div class="co-dilk">
                <p style="font-size:15px;color:#32B6C6;font-weight: 600;">{{item.basics.annual_salary}}</p>
                <p style="font-size:13px;color:#BABABA;">{{item.created_at | formatDate}}</p>
            </div>
        </div>
        <div class="co-bott-om">
           <div class="work-job-lj">
                <p style="color: #ff0000;font-weight: 600;width:100%;">
                  <img style="width:66px;height:66px;border-radius: 7px;" :src="item.user_info.avatar" alt="">
                </p>
            </div>
            <div class="work-job-cl" >
                <p class="job-pol-col" style="font-size:13px;color:#000;">{{item.basics.true_name}}</p>
                <p class="job-pol-col" style="font-size:13px;color:#BABABA;">{{item.basics.now_status}}</p>
            </div>
        </div>
     </div>
        <!--<items :items="items"></items>-->
      <infinite-loading @infinite="infiniteHandlers" ref="infiniteLoading">
          <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
          <empty slot="no-results" tips="暂时没有相关内容"></empty>
      </infinite-loading>
    </view-box>
</template>

<script>
import { ViewBox, Box, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem } from 'vux'
import { formatDate } from '../../utils/index.js'
export default {
  components: {
    ViewBox,
    Box,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      index01: 0,
      demo2: '美食',
      demoDisabled: 'A',
      index: 0,
      items: [],
      identity: 0,
      user: [{
        account: '',
        avatar: ''
      }]
    }
  },
  filters: {
    formatDate (time) {
      var date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  computed: {
    birth: function () {
      let mydate = new Date()
      let newdate = mydate.getFullYear()
      console.log(newdate)
      return newdate
    }
  },
  mounted () {
    this.identity = localStorage.getItem('identity')
  },
  methods: {
    infiniteHandlers ($state) {
      this.$http.get('/yaoqongjilu', {
        copm: {
          page: this.items.length / 20 + 1,
          page_size: 20
        }
      }).then(response => {
        console.log(response.data.data.data.length)
        if (response.data.data.data.length) {
          this.items = this.items.concat(response.data.data.data)
          console.log(this.identity)
          $state.loaded()
          if (!response.data.next_page_url) {
            $state.complete()
          }
        } else {
          $state.complete()
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
    .vux-slider {
        height: 100%;
    }
.co-laou{
width: 92%;
margin-left: 4%;
background: #fff;
opacity: 0.8;
height: auto;
margin-top: 10px;
border-radius: 7px;
}
.co-lib{
    display: flex;
    width: 92%;
    margin-left: 4%;
    border-bottom: 1px solid #E6E6E6;
    padding-top: 20px;
    padding-bottom: 10px;
}
.co-dilk{
    width: 40%;
    text-align: right;
  }
  .co-dilkp{
    width: 60%;
  }
.co-bott-om{
  display: flex;
  width: 92%;
  margin-left: 4%;
  padding-top: 5px;
  padding-bottom: 5px;
}
.work-job-lj {
    width: 25%;
    display: flex;
    align-items: center;
}
.work-job-lj p{
    font-size: 15px;

}
.work-job-cl{
  width: 75%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.job-pol-col{
  width: 100%;
  font-weight: 600;
}
.work-job-cl p{
  text-align: left;
  font-size: 15px;
}
.co-pljh{
  width: 92%;
  margin-left: 4%;
  padding: 8px 0px;
  font-size: 14px;
}
</style>